<template>
  <div class="offcialMaterialLibrary">
    <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch">
      </navSearch>
    <div class="btn">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="uploading">上传素材</el-button>
    </div>
    <el-table
      class="table"
      :data="materiaData"
      style="width: 100%"
      max-height="650"
      >
      <el-table-column
        prop="materialName"
        label="素材名称"
        width="240"
        align="center">
      </el-table-column>
           <el-table-column prop="materialImg" label="商品图" width="80" align="center">
      <template>
        <el-image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=225088321,3121593736&fm=26&gp=0.jpg"></el-image>
      </template>
      </el-table-column>
      <el-table-column
        prop="materialCategory"
        label="素材类别"
        width="240"
        align="center">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="240"
        align="center">
      </el-table-column>
      <el-table-column
        prop="uploadingDate"
        label="上传日期"
        align="center">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="270"
        align="center">
        <template slot-scope="scope">
          <el-button @click="uploading(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="600px" title="上传素材" :visible="showDialog" @close="cancel">
      <el-form label-width="120px" ref="uploadingMaterial" :model="materialDate" :rules="rules">
        <el-form-item  label="素材名称" prop="materialName" >
          <el-input style="width:80%" v-model="materialDate.materialName">
          </el-input>
        </el-form-item>
        <el-form-item prop="materialCategory" label="素材类别">
          <el-select v-model="materialDate.materialCategory" style="width:50%" placeholder="请选择">
           <el-option label="餐饮业" value="餐饮业" />
           <el-option label="零售业" value="零售业" />
           <el-option label="食品业" value="食品业" />
          </el-select>
          <br>
          <el-select v-model="materialDate.materialCategoryT" style="width:50%; margin-top: 23px;" placeholder="请选择">
           <el-option label="餐饮业" value="餐饮业" />
           <el-option label="零售业" value="零售业" />
           <el-option label="食品业" value="食品业" />
          </el-select>
        </el-form-item>
        <el-form-item label="素材价格" prop="price" >
          <el-input  style="width:80%" v-model.number="materialDate.price">
          </el-input>
        </el-form-item>
        <el-form-item label="素材图片上传" prop="materialImg" >
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="success" size="small" @click="submitTrade">提交</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formList: {
        materialName: true,
        uploaderId: true,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      showDialog: false,
      materiaData: [{
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '餐饮业-烧腊',
        price: 5000,
        uploadingDate: '2021-10-01 16:24:08'
      },
      {
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '餐饮业-烧腊',
        price: 5000,
        uploadingDate: '2021-10-01 16:24:08'
      },
      {
        materialName: '烤鸭子',
        materialImg: 'xxxx.jpj',
        materialCategory: '餐饮业-烧腊',
        price: 5000,
        uploadingDate: '2021-10-01 16:24:08'
      }],
      materialDate: {
        materialName: '',
        price: '',
        materialCategory: '', // 素材类别1
        materialCategoryT: '', // 素材类别2
        materialImg: '' // 素材图片
      },
      rules: {
        materialName: [{ required: true, message: '素材名称不能为空', tigger: 'blur' },
          { min: 2, max: 8, message: '行业名称只能是2-6个字符', tigger: 'blur' }],
        price: [{ required: true, type: 'number', message: '素材价格不能为空', tigger: 'blur' },
          { min: 1, max: 100000, type: 'number', message: '素材价格不能超过是1-100000元', tigger: 'blur' }],
        materialCategory: [{ required: true, message: '素材类别1不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getTradeList () {
      this.showDialog = false
    },
    async submitTrade () {
      try {
        await this.$refs.uploadingMaterial.validate()
        this.showDialog = false
      } catch (err) {
        console.log(err)
        this.$message('先按提示填好信息')
      }
    },
    cancel () {
      this.materialDate = {}
      this.$refs.uploadingMaterial.resetFields()
      this.showDialog = false
    },
    uploading () {
      // 上传素材
      this.showDialog = true
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    btnSearch() {
      alert(`11`)
    }
  }
}
</script>

<style lang="less" scoped>

.offcialMaterialLibrary{
  .btn{
    float: left;
    margin: 0 1px 10px;
  }
}
</style>
